import React from 'react';
import { WingBlank, ListView } from 'antd-mobile';
import { connect } from 'dva';
import _ from 'lodash';
import Container from '../components/Base/Container';
import { CouponCodeItem } from '../components/Base/CouponCode';

class CouponPage extends React.Component {
  render() {
    const { meta, codeList, couponList } = this.props;
    const couponMap = {};
    _.forEach(couponList, (coupon) => {
      couponMap[coupon.couponId] = coupon;
    });
    const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    });
    const renderRow = (rowData, sectionID, rowID) => {
      return (
        <CouponCodeItem couponCode={rowData} coupon={couponMap[rowData.couponId]} />
      );
    };
    const hasMore = () => {
      const { page, totalPageCount } = this.props.meta;
      return page < totalPageCount;
    };
    return (
      <Container title="电子优惠券-导购发券记录">
        <div
          style={{
            textAlign: 'center',
            height: '100%',
            lineHeight: '100%',
            paddingTop: '1%',
          }}
        >
          <WingBlank size="sm">

            <ListView
              dataSource={dataSource.cloneWithRows(codeList)}
              renderRow={renderRow}
              renderSeparator={null}
              renderFooter={() => <div
                style={{ padding: 30, textAlign: 'center' }}
                onClick={() => { this.props.fetchNextPageHistory(); }}
              >
                {!hasMore() ? '已全部加载完' : '下一页'}
              </div>}
              renderHeader={() => <div size="small">
                总计：{meta.totalCount} 条发券记录
              </div>}
              initialListSize={this.props.codeList.length}
              pageSize={20}
              scrollRenderAheadDistance={200}
              scrollEventThrottle={20}
              useBodyScroll
              style={{ marginBottom: -20 }}
            />
          </WingBlank>
        </div>
      </Container>
    );
  }
}

export default connect((state) => {
  return { meta: state.coupon.meta, codeList: state.coupon.codeList, couponList: state.coupon.couponList };
}, (dispatch, props) => {
  return {
    fetchNextPageHistory: () => {
      dispatch({
        type: 'coupon/nextPageHistory',
        payload: {},
      });
    },
  };
})(CouponPage);
